function TopFn(){
	this.lis = document.getElementsByClassName('huoqu');
	this.uls = document.getElementsByClassName('none');
	this.line = document.getElementById('line');
}
TopFn.prototype.init = function(){
	var that = this;
	for (var i = 0; i < this.lis.length; i++) {
	this.lis[i].index = i;
	this.lis[i].onmouseover = function(){
		clearInterval(timer);
		clearInterval(timer1);
		for (var i = 0; i < that.uls.length; i++) {
			that.uls[i].style.display = "none";
		}
		if (this.index>0&&this.index<4) {
			that.uls[this.index-1].style.display = "block";
		}
		that.line.style.width = "80px";
		actionFn((this.index*100)+10,that.line);	
	}
	var timer = null;
	this.lis[i].onmouseout = function(){
		clearInterval(timer);
		clearInterval(timer1);
		var num = 100;
		for (var i = 0; i < that.uls.length; i++) {
			that.uls[i].style.display = "none";
		}
		if (timer) {
			clearInterval(timer);
		}
		timer = setInterval(function(){
			if (num<=0) {
				clearInterval(timer);
			}
			that.line.style.width = num + 'px';
			num-=5;
		},10);
	}
	var leader = 0;
	var timer1 = null;
	function actionFn(target,ele){
		if (timer) {
			clearInterval(timer);
			clearInterval(timer1);
		}
		timer = setInterval(function(){
			leader = leader + (target - leader)/10;
			ele.style.left = leader + "px";
		},10);
	}
}
}
var mmp = new TopFn();
	mmp.init();